<template>
    <div id="main">
        <!-- :collapse="isCollapse" -->
        <el-menu
            :show-timeout="200"
            :default-active="$route.path"
            :unique-opened="true"
            router
            mode="vertical"
            text-color="#8d8d8d"
            active-text-color="#F56C6C"
        >
            <div class="wrapper" v-for="(item,index) in $store.state.roleList" :key="index">
                <div v-if="!!item.hidden == false">
                    <el-menu-item v-if="item.children.length == 0 || !item.children" :index="item.path">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{item.meta.title}}}</span>
                        </template>
                    </el-menu-item>
                    <el-submenu :index="item.path">
                        <template slot="title">
                            <i :class="item.meta.icon"></i>
                            <span>{{item.meta.title}}</span>
                        </template>
                        <el-menu-item-group>
                             <el-menu-item v-for="(child,index) in item.children" :index="child.path" :key="index">{{child.meta.title}}</el-menu-item>
                        </el-menu-item-group>    
                    </el-submenu>
                </div>
            </div>
        </el-menu>
    </div>
</template>
<script>
export default {
    data () {
        return {

        }
    },
    mounted () {
        // console.log(this.$store.state)
    }
}
</script>
<style lang="less" scoped>

    #main{
        width: 230px;
        height: 100%;
        background-color: #fff;
    }
</style>